<template>
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker
      :columns="columns"
      :columns-field-names="customFieldName"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    />
  </van-popup>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { getList } from '../api/system/tenant'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  modelValue: {
    type: Object,
    default: () => null,
  },
  regionIds: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['update:visible', 'update:modelValue', 'onItemClick'])

const columns = ref([])

const customFieldName = {
  text: 'tenantName',
}

const showPicker = computed({
  get() {
    return props.visible
  },
  set(val) {
    emit('update:visible', val)
  },
})

const value = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  },
})

watch(showPicker, async (show) => {
  if (show) {
    const regionCode = props.regionIds.join(',')
    const {
      data: {
        data: { records },
      },
    } = await getList(1, 100, { regionCode })
    columns.value = records
  }
})

function onConfirm(item: any) {
  showPicker.value = false
  value.value = item
}
</script>

<style lang="less" scoped></style>
